import { getUserInfoApi, login, getUserDetailByIdApi } from '@/api/user'
import { setToken, getToken, removeToken } from '@/utils/auth'
const state = {
  token: getToken() || '', // 设置token初始状态   token持久化 => 放到缓存中
  // token: localStorage.getItem('token') || ''
  userInfo: {} // 定义一个空的对象 不是null 因为后边我要开发userInfo的属性给别人用  userInfo.name
}

const mutations = {
  setToken(state, data) {
    setToken(data)
    // localStorage.setItem('token', data)
    state.token = data
  },
  setUserInfo(state, data) {
    state.userInfo = data // 用 浅拷贝的方式去赋值对象 因为这样数据更新之后，才会触发组件的更新
  },
  removeToken(state) {
    // 清空退出后的数据
    state.token = ''
    removeToken()
  },
  // 清空退出后的数据
  removeUserInfo(state) {
    state.userInfo = {}
  }
}

const actions = {
  async login(store, data) {
    const res = await login(data)
    console.log('vuex', res)
    // store.commit('setToken', res.data.data)
    // 响应拦截器作过解构，无需在取子属性
    store.commit('setToken', res)
    // 为了之后发请求可以主动校验是否已经失效，记录当前的登录时时间
    localStorage.setItem('loginTime', Date.now())
  },
  // 获取用户资料action
  async getUserInfo(stoer) {
    const res = await getUserInfoApi() // 获取返回值
    // console.log(res)
    const detail = await getUserDetailByIdApi(res.userId)
    stoer.commit('setUserInfo', {
      ...res,
      ...detail
    }) // 将整个的个人信息设置到用户的vuex数据中
    // return res // 这里为什么要返回 为后面埋下伏笔
  },
  // 登出的action
  logout(soter) {
    // 删除token
    soter.commit('removeToken') // 不仅仅删除了vuex中的 还删除了缓存中的
    // 删除用户资料
    soter.commit('removeUserInfo') // 删除用户信息
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
